<?
$this->includeHeader();
$Areas		= &$this->GetPageElement('AREAS');
$Cities		= &$this->GetPageElement('CITIES');
$Weathers	= &$this->GetPageElement('WEATHERS');
$Dates		= &$this->GetPageElement('DATES');
?>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
	<td width="190" valign="top">
		<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#e6f0f6" class="black12">
		<tr>
			<td width="7" height="7"><img src="/system/templates/default/images/w5_1.png" width="7" height="7"></td>
			<td></td>
			<td width="7"><img src="/system/templates/default/images/w5_2.png" width="7" height="7"></td>
		</tr>
		<tr>
			<td></td>
			<td valign="top">Блок слева </td>
			<td></td>
		</tr>
		<tr>
			<td height="7"><img src="/system/templates/default/images/w5_3.png" width="7" height="7"></td>
			<td></td>
			<td><img src="/system/templates/default/images/w5_4.png" width="7" height="7"></td>
		</tr>
		</table>
	</td>
	<td valign="top" style="padding-left:15px">
		<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#e6f0f6" class="black12">
		<tr bgcolor="#FFFF88">
			<td width="7" valign="top" bgcolor="#f9cf58"><img src="/system/templates/default/images/w5_1.png" width="7" height="7"></td>
			<td height="25" colspan="3" bgcolor="#f9cf58"><h1>Погода в Беларуси - [<a id="map_show" href="#">Карта</a>]</h1></td>
			<td width="7" valign="top" bgcolor="#f9cf58"><img src="/system/templates/default/images/w5_2.png" width="7" height="7"></td>
		</tr>
		<tr><td height="1" colspan="5" background="/system/templates/default/images/line_2.gif"></td></tr>
		<tr>
			<td height="25"></td>
			<td colspan="3" style="padding-top:7px">
				<div id="info" style="display:none">
					<p>Текст на главную.</p>
					<p>Список городов.</p>
					<table width="100%" cellpadding="0" cellspacing="0" class="black12">
					<tr>
						<td valign="top"><p><strong>Областные города:</strong></p>
							<ul>
								<?if (!is_null($Cities)) {
									foreach ($Cities as $City) {
										echo '<li><a href="',$City['URL'],'">',$City['NAME'],'</a></li>';
									}
								}?>
							</ul>
						</td>
						<td width="11" valign="top" background="/system/templates/default/images/line_vert_blue_1.gif"><img src="/system/templates/default/images/line_vert_blue_1.gif" width="11" height="6"></td>
						<?if (!is_null($Areas)) {
							foreach ($Areas as $Index => $Area) {
								echo '<td valign="top">
									<p><a href="',$Area['URL'],'"><strong>',$Area['NAME'],':</strong></a></p>
									<ul>';
								foreach ($Area['CITIES'] as $City) {
									echo '<li><a href="',$City['URL'],'">',$City['NAME'],'</a></li>';
								}
								echo '<li><a href="',$Area['URL'],'">Другие...</a></li>
									</ul>
								</td>';
								if ($Index != 5) {echo '<td width="11" valign="top" background="/system/templates/default/images/line_vert_blue_1.gif"><img src="/system/templates/default/images/line_vert_blue_1.gif" width="11" height="6"></td>';}
							}
						}?>
					</tr>
					</table>
				</div>
				<div id="map" style="display:block">
					<div id="slider">
						<div id="slide_dates">
							<?$months = array('01' => 'января', '02' => 'февраля', '03' => 'марта', '04' => 'апреля', '05' => 'мая', '06' => 'июня', '07' => 'июля', '08' => 'авгутса', '09' => 'сентября', '10' => 'октября', '11' => 'ноября', '12' => 'ноября');
								$week		= array('вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб');
								$D = new DateTime();
							foreach ($Dates as $Date) {
								preg_match('#([0-9]+)-([0-9]+)-([0-9]+)#', $Date['DATE'], $match);
								$D->setDate($match[1], $match[2], $match[3]);
								echo '<span class="date">', $match[3], ' ',$months[$match[2]],', ',$week[$D->format('w')], '</span>';
							}
							?>
						</div>
						<div id="slide_line">
							<div id="sdiler_cursor"></div>
							<div id="slider_scale"></div>
						</div>
						<div style="cleat:both"></div>
						<div id="slide_time">
							<?$TimesArray = array('ночь', 'утро', 'день', 'вечер');
							for ($i = 0; $i < 5; ++$i) {
								foreach ($TimesArray as $Index => $Time) {
									echo '<span class="time">',$Time,'</span>';
								}
							}
							?>
						</div>
					</div>
					<div id="rb_map">
						<div id="vit_mmap" class="mmap"></div>
						<div id="gr_mmap" class="mmap"></div>
						<div id="min_mmap" class="mmap"></div>
						<div id="mog_mmap" class="mmap"></div>
						<div id="br_mmap" class="mmap"></div>
						<div id="gom_mmap" class="mmap"></div>
						<div id="map_layers"></div>
					</div>
									<?foreach ($Weathers as $Index => $Value) {
		echo $Index, ' - ', $Value['NAME'], '<br />';
	}?>
				</div>
			</td>
			<td></td>
		</tr>
		<tr>
			<td height="7"><img src="/system/templates/default/images/w5_3.png" width="7" height="7"></td>
			<td></td>
			<td></td>
			<td></td>
			<td><img src="/system/templates/default/images/w5_4.png" width="7" height="7"></td>
		</tr>
		</table>
	</td>
</tr>
</table>
<script>
	$(document).ready(function() {
		<?
			echo 'var wDates = ['; getDates($Dates); echo '];';
			echo 'var wCities = {'; getCities($Weathers); echo '};';
		?>
		var cCoords = {
			174:	[635, 40],
			1450:	[135, 630],
			3531:	[560, 690],
			5007:	[380, 55],
			7068:	[360, 400],
			9057:	[340, 650],
			1231:	[80, 350],
			2629:	[160, 320],
			1354:	[60, 430],
			2705:	[40, 510],
			1967:	[240, 680],
			2377:	[250, 625],
			2953:	[270, 575],
			2841:	[210, 600],
			2161:	[170, 670],
			1714:	[100, 580],
			2510:	[110, 480],
			2254:	[110, 380],
			3185:	[140, 380],
			1612:	[175, 405],
			1873:	[205, 410],
			3035:	[145, 485],
			2070:	[180, 495],
			3263:	[150, 555],
			1139:	[180, 568],
			3126:	[220, 520],
			7239:	[203, 328],
			6304: [240, 346],
			7152: [281, 318],
			6440: [317, 305],
			6892: [304, 402],
			6180: [277, 461],
			6772: [257, 509],
			7604: [332, 438],
			6084: [309, 506],
			7939: [371, 483],
			6539: [378, 335],
			7791: [412, 312],
			7852: [403, 390],
			7407: [426, 432],
			7327: [454, 302],
			6679: [459, 371],
			7541: [491, 383],
			7719: [488, 445],
			6607: [501, 303],
			7672: [525, 383],
			6357: [551, 422],
			5671: [200, 246],
			5979: [228, 265],
			5754: [263, 236],
			4915: [332, 166],
			5244: [355, 228],
			5329: [393, 231],
			5567: [409, 178],
			5418: [368, 161],
			6080: [400, 116],
			5114: [441, 164],
			5501: [433, 101],
			4801: [446, 53],
			4846: [470, 75],
			5815: [505, 70],
			5171: [468, 163],
			5878: [498, 156],
			3: [465, 236],
			750: [496, 226],
			553: [573, 35],
			351: [604, 70],
			631: [631, 119],
			809: [678, 57],
			1035: [551, 100],
			117: [575, 153],
			485: [542, 200],
			241: [541, 300],
			291: [616, 174],
			399: [638, 224],
			919: [620, 280],
			698: [588, 313],
			1122: [664, 331],
			4059: [687, 408],
			3681: [700, 490],
			4234: [710, 567],
			3271: [713, 648],
			3737: [598, 403],
			4349: [656, 445],
			4179: [656, 528],
			4722: [681, 573],
			4111: [677, 654],
			3901: [622, 567],
			4448: [600, 631],
			3618: [587, 726],
			4281: [564, 491],
			4651: [555, 580],
			3450: [553, 757],
			3796: [520, 594],
			3357: [524, 669],
			4796: [736, 506],
			4564: [470, 620],
			3982: [485, 707],
			8238: [519, 489],
			9289: [455, 475],
			8023: [481, 536],
			8626: [403, 543],
			8440: [448, 557],
			8105: [414, 619],
			9378: [410, 678],
			9634: [394, 731],
			8804: [440, 710],
			8720: [425, 771],
			9442: [407, 819],
			8510: [378, 797],
			7948: [343, 570],
			8927: [302, 578],
			9750: [306, 651],
			8785: [281, 706],
			8378: [307, 718],
			9191: [333, 770],
			9571: [368, 666],
			8880: [363, 730]
		};
		var sDate = 0;
		var sTime = 'NIGHT';
		<? echo 'var wTimes = {'; getTimes($Dates); echo '};';?>
		var img_day = {120:"360",220:"330",320:"300",420:"300",110:"0",111:"180",130:"210",131:"180",140:"240",141:"180"};
		var img_night = {120:"750",220:"780",320:"720",420:"690",110:"660",111:"570",130:"600",131:"570",140:"630",141:"570"};
		// ---
		/*
		$("#sdiler_cursor").mousedown(function(e) {cursor.move = true;cursor.x = e.pageX;});
		$(document).mouseup(function() {cursor.move = false;})
		$(document).mousemove(function(e) {
			if (cursor.move) {
				cursor.pos += (e.pageX - cursor.x);
				if (cursor.pos < 0) {cursor.pos = 0;}
				else if (cursor.pos > 790) {cursor.pos = 790;}
				$("#sdiler_cursor").css({marginLeft: cursor.pos+"px"});
				cursor.x = e.pageX;
				for (key in times) {
					if (cursor.pos == key) {
						time = times[key].time;
						date = times[key].date;
						break;
					} else if (cursor.pos > key) {
						time = times[key].time;
						date = times[key].date;
						var i = key + 1;
						if (times[i]) {if (cursor.pox < i) {break;}}
					}
				}
				render();
			}
		});*/
		function render() {
			var labels = "";
			for (key in cCoords) {
				var item = cCoords[key];
				var img, k;
				if (wCities[key][sTime+"_RAIN"][sDate] == 2 && wCities[key][sTime+"_PHEN"][sDate] == 0) {k = wCities[key][sTime+"_CLOUDY"][sDate]+"20";}
				else {k = "1"+wCities[key][sTime+"_RAIN"][sDate]+wCities[key][sTime+"_PHEN"][sDate];}
				if (sTime == "NIGHT") {img = img_night[k];}
				else {img = img_day[k];}
				labels += "<div id='city_"+key+"' class='cityLayer' style='margin-top:"+item[0]+"px;margin-left:"+item[1]+"px'>";
				labels += "<span class='WeatherImg' style='background-position:0 -"+img+"px'></span>";
				labels += "<div><span class='WeatherT'>"+wCities[key][sTime+"_T"][sDate]+"C</span><br />";
				labels += "<span class='CityName'>"+wCities[key]["NAME"]+"</span></div>";
				labels += "</div>";
			}
			$('#map_layers').html(labels);
		}
		render();
		var Drags = {
			drag_id: null
		};
		var Elements = $('.cityLayer');
		for (var iElement = 0; iElement < Elements.length; ++iElement) {
			var Element = $(Elements[iElement]);
			Drags[Elements[iElement]["id"]] = {
				move: false,
				mL: parseInt(Element.css("marginLeft").replace("px", "")),
				mT: parseInt(Element.css("marginTop").replace("px", "")),
				mY: 0,
				mX: 0
			};
			Element.mousedown(function(e) {
				if (e.button == 0) {
					Drags[this.id]["move"] = true;
					Drags.drag_id = this.id
					Drags[this.id]["mY"] = e.pageY;
					Drags[this.id]["mX"] = e.pageX;
				}
			});
			Element.css({cursor:"move"});
		}
		$(document).mouseup(function() {
			if (Drags.drag_id) {
				Drags[Drags.drag_id]["move"] = false;
				Drags.drag_id = null;
			}
		});
		$(document).mousemove(function(e) {
			if (!Drags.drag_id) {return false;}
			if (!Drags[Drags.drag_id]["move"]) {return false;}
			Drags[Drags.drag_id]["mL"] += (e.pageX - Drags[Drags.drag_id]["mX"]);
			if (Drags[Drags.drag_id]["mL"] > 900) {Drags[Drags.drag_id]["mL"] = 900;}
			if (Drags[Drags.drag_id]["mL"] < 0) {Drags[Drags.drag_id]["mL"] = 0;}
			Drags[Drags.drag_id]["mT"] += (e.pageY - Drags[Drags.drag_id]["mY"]);
			if (Drags[Drags.drag_id]["mT"] > 760) {Drags[Drags.drag_id]["mT"] = 760;}
			if (Drags[Drags.drag_id]["mT"] < 0) {Drags[Drags.drag_id]["mT"] = 0;}
			$("#"+Drags.drag_id).css({
				marginLeft: Drags[Drags.drag_id]["mL"]+"px", 
				marginTop: Drags[Drags.drag_id]["mT"]+"px"
			});
			Drags[Drags.drag_id]["mX"] = e.pageX;
			Drags[Drags.drag_id]["mY"] = e.pageY;
		});
		Elements = null;
	});
</script>
<script>
	$(document).ready(function() {
		var b = 1;
		$("#map_show").click(function() {
			$("#map").toggle();
			$("#info").toggle();
			if (b == 1) {$(this).html("Вернуться");b = 2;}
			else {$(this).html("Карта");b = 1;}
			return false;
		});
	});
</script>
<?
	function getDates(&$Dates) {
		$sep = '';
		foreach ($Dates as $Date) {
			echo $sep,'"',$Date['DATE'],'"';
			$sep = ',';
		}
	}
	function getCities(&$Weathers) {
		$sep = '';
		foreach ($Weathers as $ID => $City) {
			echo $sep, $ID, ': {';
			$s = '';
			foreach ($City as $Index => $Value) {
				if ($Index != 'NAME' && $Index != 'CITY_TYPE' && $Index != 'AREAD_ID') {echo $s, $Index,': [', implode(',', $Value), ']';}
				else {echo $s, $Index,': "', $Value, '"';}
				$s = ',';
			}
			echo '}';
			$sep = ',';
		}
	}
	function getTimes(&$Dates) {
		$i = 0;$sep = '';
		$TimesArray = array('NIGHT', 'MORNING', 'DAY', 'EVENING');
		foreach ($Dates as $Index => $Date) {
			foreach ($TimesArray as $Time) {
				echo $sep, $i, ': {date:"', $Index, '", time:"', $Time, '"}';
				$sep = ',';
				$i += 40;
			}
		}
	}
	$this->includeFooter();
?>